<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件注册</title>
	</head>
	<body>
		
		<div id="app">
				<hello1></hello1>
				<hello2></hello2>
				<hello3></hello3>
		</div>
		
		<!-- 定义模版代码1 -->
		<template id="hello1">
			<div>
				{{msg}}
			</div>
		</template>
		
		<template id="hello2">
			<div>
				{{msg}}
			</div>
		</template>
		
		<template id="hello3">
			<div>
				{{name}}
				
				<!-- 在全局组件中引用局部组件 使用不生效 -->
				<!-- <hello1></hello1> -->
			</div>
		</template>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			
			//定义全局组件
			Vue.component('hello3',{
				data(){
					return {
						name: '定义全局组件'
					}
				},
				template: "#hello3"
			})
			
			
			/* 定义局部组件 */
			let hello1 = {
				data(){
					return {
						msg: '你好Hello1'
					}
				},
				template: "#hello1"
			}
			
			let hello2 = {
				data(){
					return {
						msg: '你好Hello2'
					}
				},
				template: "#hello2"
			}
			
			
			const app = new Vue({
				el : "#app",
				data : {
					
				},
				//只能在当前元素中使用
				components: {
					'hello1' : hello1,
					'hello2' : hello2
				}
			})
		</script>
	</body>
</html>
